// ignore_for_file: must_be_immutable

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text('这是列表页面')),
      body: const MyText(),
    ),
  ));
}

class MyText extends StatelessWidget {
  const MyText({super.key});

  void _handlePress() {
    print('点击了');
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ElevatedButton(onPressed: _handlePress, child: const Text('普通按钮')),
            TextButton(onPressed: _handlePress, child: const Text('文本按钮')),
            OutlinedButton(
                onPressed: _handlePress, child: const Text('带边框的按钮')),
            IconButton(onPressed: _handlePress, icon: const Icon(Icons.home))
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Container(
                width: 100,
                height: 100,
                child: ElevatedButton.icon(
                    onPressed: _handlePress,
                    icon: const Icon(Icons.home),
                    label: const Text('发送'),
                    style: ButtonStyle(
                        // 字体颜色
                        foregroundColor:
                            MaterialStateProperty.all(Colors.white),
                        // 背景色
                        backgroundColor: MaterialStateProperty.all(Colors.blue),
                        // 阴影颜色
                        shadowColor: MaterialStateProperty.all(Colors.red),
                        // 阴影长度
                        elevation: MaterialStateProperty.all(10),
                        // 圆角
                        shape: MaterialStateProperty.all(
                            // 带圆角的按钮
                            // RoundedRectangleBorder(
                            //   borderRadius: BorderRadius.circular(10))
                            // 原型按钮
                            const CircleBorder(
                                side: BorderSide(color: Colors.yellow)))))),
            TextButton.icon(
              onPressed: _handlePress,
              icon: const Icon(Icons.home),
              label: const Text('文本按钮'),
              style: ButtonStyle(
                foregroundColor: MaterialStateProperty.all(Colors.white),
                backgroundColor: MaterialStateProperty.all(Colors.purple),
              ),
            ),
            Container(
              height: 60,
              width: 100,
              child: OutlinedButton.icon(
                  onPressed: _handlePress,
                  icon: const Icon(Icons.home),
                  label: const Text('带边框')),
            )
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            // 给按钮设置大小，会继承父元素的宽高
            SizedBox(
              height: 60,
              width: 200,
              child: OutlinedButton.icon(
                  onPressed: _handlePress,
                  icon: const Icon(Icons.home),
                  label: const Text('带边框')),
            )
          ],
        ),
        Row(
          children: [
            Expanded(
              flex: 1,
              child: Container(
                padding: const EdgeInsets.all(10),
                child: OutlinedButton.icon(
                  onPressed: _handlePress,
                  icon: const Icon(Icons.home),
                  label: const Text('带边框'),
                  style: ButtonStyle(
                      // 设置边框的宽度和颜色
                      side: MaterialStateProperty.all(
                          const BorderSide(width: 1, color: Colors.red))),
                ),
              ),
            )
          ],
        )
      ],
    );
  }
}
